import { Router, Route, Link, BrowserRouter, Switch, useLocation, useHistory } from 'react-router-dom'
import { React, useEffect, useState } from 'react';
import { Layout, Menu, Breadcrumb, Button, Modal } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Redirect } from 'react-router'

import './mockExam.css'
//科目一顺序练习
import SubjectOneOrderly from './subjectOneOrderlyPractise'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

export default () => {
    const [breadCrumbFir, setBreadCrumbFir] = useState('科目一')
    const [breadCrumbSec, setBreadCrumbSec] = useState('小车')
    const [breadCrumbTir, setBreadCrumbTir] = useState('专项练习')
    const [subject, setSubject] = useState('subjcetOne')
    const [visible, setVisible] = useState(false)
    const history = useHistory()
    //面包屑参数设置
    const onClickMenuItem = (item) => {
        const keyPath = item.keyPath
        switch (keyPath[1]) {
            case 'car':
                setBreadCrumbSec("小车")
                switch (keyPath[0]) {
                    case '1':
                        setBreadCrumbTir("专项练习")
                        break;
                    case '2':
                        setBreadCrumbTir("章节练习")
                        break;
                    case '3':
                        setBreadCrumbTir("顺序练习")
                        break;
                    case '4':
                        setBreadCrumbTir("模拟考试")
                        break;
                    default:
                        break;
                }
                break;
            case 'trucks':

                setBreadCrumbSec("货车")
                switch (keyPath[0]) {
                    case '5':
                        setBreadCrumbTir("专项练习")
                        break;
                    case '6':
                        setBreadCrumbTir("章节练习")
                        break;
                    case '7':
                        setBreadCrumbTir("顺序练习")
                        break;
                    case '8':
                        setBreadCrumbTir("模拟考试")
                        break;
                    default:
                        break;
                }

                break;
            case 'bus':

                setBreadCrumbSec("客车")
                switch (keyPath[0]) {
                    case '9':
                        setBreadCrumbTir("专项练习")
                        break;
                    case '10':
                        setBreadCrumbTir("章节练习")
                        break;
                    case '11':
                        setBreadCrumbTir("顺序练习")
                        break;
                    case '12':
                        setBreadCrumbTir("模拟考试")
                        break;
                    default:
                        break;
                }
                break;
            default:
                break;
        }
    }
    //
    const carSubjectOneTest = () => {
        console.log("carSubjectOne")
        // window.location.replace("/examination")
    }
    const examTypeInsert = (examType) => {
        /**
         * 0:小车
         * 1:货车
         * 2:客车
         */
        if (examType == 0) {
            sessionStorage.setItem("examType", "小车")
        }
        else if (examType == 1) {
            sessionStorage.setItem("examType", "货车")
        }
        else {
            sessionStorage.setItem("examType", "客车")
        }
        setVisible(true)


    }

    return (
        <div>
            <Layout>
                <Header className="header">
                    {/* <div className="logo" /> */}
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1" onClick={() => { setBreadCrumbFir("科目一") }}>科目一（交规）</Menu.Item>
                        <Menu.Item key="2" onClick={() => { setBreadCrumbFir("科目四") }}>科目四（安全文明驾驶）</Menu.Item>
                    </Menu>
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            theme="dark"
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['car', 'trucks', 'bus']}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            <SubMenu key="car" icon={<UserOutlined />} title="小车" onClick={onClickMenuItem}>
                                <Menu.Item key="1">专项练习</Menu.Item>
                                <Menu.Item key="2">章节练习</Menu.Item>
                                <Menu.Item key="3"><Link to='/user/subjectOne/orderly'>顺序练习</Link></Menu.Item>
                                <Menu.Item key="4" onClick={() => { examTypeInsert(0) }}>模拟考试</Menu.Item>
                            </SubMenu>
                            <SubMenu key="trucks" icon={<LaptopOutlined />} title="货车" onClick={onClickMenuItem}>
                                <Menu.Item key="5">专项练习</Menu.Item>
                                <Menu.Item key="6">章节练习</Menu.Item>
                                <Menu.Item key="7">顺序练习</Menu.Item>
                                <Menu.Item key="8" onClick={() => { examTypeInsert(1) }}>模拟考试</Menu.Item>
                            </SubMenu>
                            <SubMenu key="bus" icon={<NotificationOutlined />} title="客车" onClick={onClickMenuItem}>
                                <Menu.Item key="9">专项练习</Menu.Item>
                                <Menu.Item key="10">章节练习</Menu.Item>
                                <Menu.Item key="11">顺序练习</Menu.Item>
                                <Menu.Item key="12" onClick={() => { examTypeInsert(2) }}>模拟考试</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>{breadCrumbFir}</Breadcrumb.Item>
                            <Breadcrumb.Item>{breadCrumbSec}</Breadcrumb.Item>
                            <Breadcrumb.Item>{breadCrumbTir}</Breadcrumb.Item>
                        </Breadcrumb>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            <Switch>
                                <Route path="/user/subjectOne/orderly" component={SubjectOneOrderly} />
                                {/* <Route path="/subjectOne/orderly" component={SubjectOneOrderly} />
                                <Route path="/subjectOne/orderly" component={SubjectOneOrderly} />
                                <Route path="/subjectOne/orderly" component={SubjectOneOrderly} />
                                <Route path="/subjectFour/orderly" component={SubjectOneOrderly} />
                                <Route path="/subjectFour/orderly" component={SubjectOneOrderly} />
                                <Route path="/subjectFour/orderly" component={SubjectOneOrderly} />
                                <Route path="/subjectFour/orderly" component={SubjectOneOrderly} /> */}
                            </Switch>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
            <Modal
                title="是否开始考试"
                visible={visible}
                onOk={() => { history.push('/examination') }}
                okText='确认'
                onCancel={() => { setVisible(false) }}
            />
        </div>
    )
}